<template>
  <div>
    <vxe-table
      border
      size="medium"
      :merge-cells="mergeCells"
      :data="tableData"
      :key="componentKey"
    >
      <vxe-table-column title="模块" width="120px">
        <template v-slot:default="{row}">
          <vxe-checkbox
            v-model="checkedRights[row.parentRights.key]"
            :content="row.parentRights.name"
            :indeterminate="indeterminateRights[row.parentRights.key]"
            @change="(event)=>{checkboxChange(event,row.parentRights)}"
          ></vxe-checkbox>
        </template>
      </vxe-table-column>
      <vxe-table-column title="子模块" width="120px">
        <template v-slot:default="{row}">
          <vxe-checkbox
            v-model="checkedRights[row.key]"
            :content="row.name"
            :indeterminate="indeterminateRights[row.key]"
            @change="(event)=>{checkboxChange(event,row)}"
          ></vxe-checkbox>
        </template>
      </vxe-table-column>
      <vxe-table-column title="功能">
        <template v-slot:default="{row}">
              <span class="functionCheckBox" v-for="(functionItem,index) in row.functionRights" :key="index">
                <vxe-checkbox
                  v-model="checkedRights[functionItem.key]"
                  :content="functionItem.name"
                  :indeterminate="indeterminateRights[functionItem.key]"
                  @change="(event)=>{checkboxChange(event,functionItem)}"
                ></vxe-checkbox>
              </span>
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  name: 'table',
  props: {
    tableData: {
      type: Array,
      required: true
    },
    checkedRights: {
      type: Array,
      required: true
    },
    mergeCells: {
      type: Array,
      required: true
    },
    indeterminateRights: {
      type: Array,
      required: true
    },
    componentKey: {
      type: Number,
      required: true
    }
  },
  methods: {
    checkboxChange (event, rights) {
      this.$emit('checkboxChange', { event, rights })
    }
  }
}
</script>

<style scoped>
.functionCheckBox {
  margin-right: 20px;
}
</style>
